import { useEffect, useState, useTransition } from "react";
import { faker } from "@faker-js/faker";

// 创建一个包含500个随机句子的数组
const d = Array.from({ length: 500 }, () => faker.lorem.sentence(10));

// InfinateAnimate 组件用于创建一个无限旋转的动画
function InfinateAnimate() {
  const [rotate, setRotate] = useState(65);

  // 使用 useEffect 钩子来设置动画
  useEffect(() => {
    const start = () => {
      requestAnimationFrame(start);
      setRotate((prev) => {
        return prev + 1;
      });
    };
    start();
  }, []); // 空依赖数组表示这个 effect 只在组件挂载时执行一次

  return (
    <div style={{
      transform: `rotate(${rotate}deg)`,
      width: 100,
      height: 100,
      background: 'pink'
    }}></div>
  );
}

// ListItem 组件用于渲染一个列表项
function ListItem(props = { text: '' }) {
  const start = performance.now();
  // 模拟耗时的渲染过程
  while (performance.now() - start < 1);
  return <p>{props.text}</p>;
}

// SearchReault 组件用于渲染搜索结果
function SearchReault({ query = '' }) {
  if (!query) {
    return null;
  }
  return (
    <div>
      搜索结果:
      {d.map((s) => (
        <ListItem key={s} text={s} />
      ))}
    </div>
  );
}

// Home 组件渲染主页内容
function Home() {
  return <div>Home</div>;
}

// About 组件渲染关于页内容
function About() {
  return <div>About</div>;
}

// TabButton 组件用于渲染标签页按钮
function TabButton(props = { title: '', onClick: () => {} }) {
  const { title, onClick } = props;
  const [isPending, startTransition] = useTransition();
  // 根据是否处于过渡状态，按钮的透明度会变化
  return (
    <button
      style={{ opacity: isPending ? 0.2 : 1 }}
      onClick={() => {
        // 开启一个低优先级的并发渲染，可以被中断
        startTransition(() => {
          onClick();
        });
      }}
    >
      {title}
    </button>
  );
}

// randomColor 函数用于生成一个随机颜色
function randomColor() {
  return "#" + Math.random().toString(16).padStart(6, "0").substring(2, 8);
}

// ToggleColor 组件用于改变背景颜色
function ToggleColor() {
  const [color, changeColor] = useState(randomColor());
  return (
    <div
      style={{ background: color, width: 100, height: 100 }}
      onClick={() => changeColor(randomColor())}
    ></div>
  );
}

// Index 组件是应用的根组件
function Index() {
  const [tab, setTab] = useState("home"); // 用于控制当前激活的标签页
  const [query, setQuery] = useState(""); // 用于存储搜索框的输入内容
  const [isPending, startTransition] = useTransition(); // 用于启动低优先级的过渡更新

  return (
    <main>
      <div>
        {/* <InfinateAnimate/> */}
        <input type="text" onChange={e => {
          startTransition(() => {
            setQuery(e.target.value);
          });
        }}/>
        <nav>
          <TabButton title={"home"} onClick={() => setTab("home")} />
          <TabButton title={"search"} onClick={() => setTab("search")} />
          <TabButton title={"about"} onClick={() => setTab("about")} />
        </nav>
        {tab === "home" && <Home />}
        {tab === "search" && <SearchReault query={query} />}
        {tab === "about" && <About />}
      </div>
      <ToggleColor />
    </main>
  );
}

export default Index;
